<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>指标趋势</title>
    <link rel="stylesheet" href="../source/bootstrap-3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../source/bootstrap-table-1.11.1/bootstrap-table.min.css">
    <script src="../source/jquery/jquery-1.10.2.min.js"></script>
    <script src="../source/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="../source/bootstrap-table-1.11.1/bootstrap-table.js"></script>
    <script src="../source/bootstrap-table-1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="../source/iconfont/iconfont.js"></script>
    <script src="../source/echarts.min.js"></script>
    <!-- <script src="../source/echarts-all.js"></script>-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            font-size: 25px;
            line-height: 30px;
            margin-right: 0px;
            margin-left: 0px;
        }
        .row{
            margin-right: 0px;
            margin-left: 0px;
        }

        #table1 td{height:30px;padding:6px;}
        #table1 thead tr th{
            color:#ffffff;
            height:36px;
        }
        .bootstrap-table .table.table-no-bordered>tbody>tr>td, .bootstrap-table .table.table-no-bordered>thead>tr>th {
            border-right: 0.1px solid transparent;
        }
        .th-inner{
            height: 36px;
        }
        .fixed-table-container thead th:first-child {

            border-top-left-radius: 0px;
            -webkit-border-top-left-radius: 0px;

        }
    </style>

</head>
<body>
<div class="container-fluid" style="height: 100%;padding-left: 0px;padding-right: 0px;">

    <div class="row" style="height: 13%; text-align: center;padding:15px 10px 5px 10px; ">
        <div class="row" style="height: 100%;position: relative;">
            <div style="width:100%;position: absolute; top: 0px;">

               <span style="float: left;margin-left: 10%;padding-top: 0.125em">
                   <svg class="icon" aria-hidden="true" style="width: 0.85em;height:0.85em;background-image: url(../imgs/img_ranking.png);background-size: 100% 100%">

                       <!--　　  <use xlink:href="#icon-qushitu"></use>-->
                       　　</svg>
                   <!--<svg class="icon" aria-hidden="true">-->
                   <!--　　  <use xlink:href="#icon-qushitu"></use>-->
                   <!--　　</svg>-->
               </span>
                <span style="float: left;font-size: large;margin-left: 0.857em;padding-top: 0.125em">全省趋势</span>

            </div>

        </div>

    </div>

    <div class="row" style="height: 87%;text-align: center;margin-right: 0px;margin-left: 0px;">

        <!--tab-->
        <div id="tab" class="row" style="width: 80%;line-height: 30px;border-radius: 3em 3em 3em 3em / 3em 3em;box-shadow: 1px 1px 1px 1px #1899FA;margin-left: 10%;padding: 2px 5px 2px 5px;margin-top: -0.75em;position: relative;z-index: 100">
            <div id="tab1" class="col-xs-4" style="height:30px;line-height:30px;border-radius: 3em 3em 3em 3em / 3em 3em;background-color: #1899FA;color:#ffffff;">周</div>
            <div id="tab2" class="col-xs-4" style="height:30px;line-height:30px;border-radius: 3em 3em 3em 3em / 3em 3em;">月</div>
            <div id="tab3" class="col-xs-4" style="height:30px;line-height:30px;border-radius: 3em 3em 3em 3em / 3em 3em;">年</div>
        </div>
        <!--折线图-->
        <div class="row" style="height: 40%;">
            <div id="echart1" style="height:100%;width: 94%;margin-left: 2.5%;margin-right:2.5%;margin-top: -2em;z-index: 1"></div>
        </div>

        <!--table-->
        <div class="row" style="height: 35%;position: relative;margin-top: -2em;">
            <div style="width:100%;position: absolute;padding: 10px 10px 0px 10px; ">
                <table id="table1"></table>
            </div>
        </div>

    </div>
</div>
</body>


<script type="text/javascript">
    
    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }
    
    window.onload=function(){
        //alert($(window).height()); //浏览器当前窗口可视区域高度
        //alert($(document).height()); //浏览器当前窗口文档的高度
        document.getElementsByTagName('body')[0].style.height = $(window).height()+'px';
        document.getElementsByTagName('body')[0].style.width = $(window).width()+'px';
        //  var json ='{"cityName":"全省","s_id":"B01I00101"}';
        var indId = getQueryString("s_id");
        var city = decodeURI(escape(getQueryString("cityName")));
        //var apiUrl ="http://10.254.204.130:89/api/apph5api/getkeywherep";
       var apiUrl ="http://111.8.20.247:89/api/apph5api/getkeywherep";
        var firstUrl = apiUrl + "?id=gettheprovince_daydata&CITY_NAME="+city+"&S_id="+indId+"";
        var clickUrl = "";

        function loadData(actionUrl,tabId){
            var data = [];
			var datatable=[];
            var yMaxValue = 0;
            $.ajax({
                type:"GET",
                url:actionUrl,
                dataType:"jsonp",
                success:function(res){
                    if (tabId == "tab3") {
                        for (var i=res.result.length-1;i>=0;i--) {
                        data.push(res.result[i]);
                        }
                        datatable=data;

                    } else {
                        datatable=res.result;
                        for (var i=0;i<res.result.length;i++) {
                            data.push(res.result[i]);
                        }
                    }
//                    for (var i=res.result.length-1;i>=0;i--) {
//
//                        data.push(res.result[i]);
//                    }
                    // table
                    $("#table1").bootstrapTable('destroy');
                    $("#table1").bootstrapTable({
                        data:datatable,
                        classes:"table table-hover table-no-bordered table-striped",
                        search: false,
                        pagination: false,
                        showColumns: false,
                        showRefresh: false,
                        showToggle: false,
                        locale: "zh-CN",

                        striped: true,
                        columns:[//color:#A4A4A4
                            {field:"time", title:"日期",width:"40%",height:'36',align:"center",
                                formatter: function (value, row, index) {

                                    if(tabId=="tab3"){
                                        var change =  row.time;
                                        return change;

                                    }
                                    else{
                                        var change =  row.time.replace(/年|月/g,"-").replace("日","");
                                        return change;
                                    }



                                }},
                            {field:"inD_DATA", title:"指标值",width:"30%",align:"center",formatter:function(value,row,index){
                                if(row.inD_DATA>yMaxValue){
                                    yMaxValue = Math.ceil(row.inD_DATA);
                                }
                                return row.inD_DATA;
                            } },
                            {field:"lasttime_data", title:"环比",width:"30%",align:"center",formatter:function(value,row,index){


                                if(parseFloat(row.sorT_ID) == 0){

                                    if(parseFloat(row.lasttime_data) < 0){
                                        row.lasttime_data ='<span style="color:#FF0000; ">'+row.lasttime_data+'<svg class="icon" aria-hidden="true" style="font-size: 15px;"> <use xlink:href="#icon-jiantou1-copy-copy"></use> </svg></span>';

                                    }else if(parseFloat(row.lasttime_data) >0){
                                        row.lasttime_data ='<span style="color:#6EFB78;" >'+row.lasttime_data+'<svg class="icon" aria-hidden="true" style="font-size: 15px;"> <use xlink:href="#icon-jiantou1"></use> </svg></span>';
                                    }else if(row.lasttime_data ==null){
                                        row.lasttime_data = 0;
                                    }
                                    return row.lasttime_data;


                                }
                                else {

                                    if(parseFloat(row.lasttime_data) < 0){


                                        row.lasttime_data ='<span style="color:#6EFB78;" >'+row.lasttime_data+'<svg class="icon" aria-hidden="true" style="font-size: 15px;"> <use xlink:href="#icon-jiantou1"></use> </svg></span>';
                                    }else if(parseFloat(row.lasttime_data) >0){
                                        row.lasttime_data ='<span style="color:#FF0000; ">'+row.lasttime_data+'<svg class="icon" aria-hidden="true" style="font-size: 15px;"> <use xlink:href="#icon-jiantou1-copy-copy"></use> </svg></span>';

                                    }else if(row.lasttime_data ==null){
                                        row.lasttime_data = 0;
                                    }
                                    return row.lasttime_data;



                                }

                            } }
                        ],
                        onPostHeader:function(){
                            //修改表格背景颜色
                            var ths = document.getElementsByTagName('th');
                            for(var i = 0; i < ths.length; i++){
                                ths[i].style.backgroundColor='#169BFA';
                                ths[i].style.backgroundImage='none';

                            }
                        }
                    });
                    // echart
                    // xAxis yAxis data
                    var xData = [];
                    var yData = [];
			//	alert(data.length);

                    for (var i=data.length-1;i>=0;i--) {
//                          xData.push(data[i].time.replace(/年|月/g,"-").replace("日",""));

                        if (tabId == "tab3") {
                            var showTime=[];
                            showTime.push(data[i].time);
                            xData.push(data[i].time.replace(/年|月/g, "-").replace("日", "").slice(5,7)+"月");
                            yData.push(data[i].inD_DATA);
                        } 
						
						  if (tabId == "tab1" || tabId == "tab2") 
						  {
                            xData.push(data[i].time.replace(/年|月/g, "-").replace("日", "").slice(5));
                            yData.push(data[i].inD_DATA);
                        }


                    }
                    echarts.dispose(document.getElementById('echart1'));//清空此前echart
                    var myChart = echarts.init(document.getElementById('echart1'));//重新加载渲染echart
                    var startPercent = xData.length>12 ? 50:0
                    var endPercent = xData.length >12? 100:100;
                    option = {
                        tooltip : {
                            show:true,
                            trigger:'axis',
                        },
                        grid: {
                            right:'10%',
                            width:'75%',
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: xData,
                            axisLine:{
                                show:false
                            },
                            axisLabel:{
                                interval:0,
                                rotate:45
                            },
                            splitLine:{
                                show:false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            min: function(value) {

                                var MinVa;

                                if(value.min>100000){
                                    var test1 =Math.floor( value.min/10000);
                                    MinVa= test1*10000;

                                }
                                else if(value.min>10000){
                                    var test1 =Math.floor( value.min/1000);
                                    MinVa= test1*1000;

                                }
                                else if(value.min>1000){
                                    var test1 =Math.floor( value.min/100);
                                    MinVa= test1*100 ;

                                }
                                else  if(value.min>100){
                                    var test1 =Math.floor( value.min/10);
                                    MinVa= test1*10 ;
                                }
                                else if(value.min>10){
                                    var test1 =Math.floor( value.min/10);
                                    MinVa= test1*10 ;
                                }
                                else if(value.min>5){
                                    MinVa= 5 ;
                                }
                                else if(value.min>4){
                                    MinVa= 4 ;
                                }
                                else if(value.min>3){
                                    MinVa= 3 ;
                                }
                                else if(value.min>2){
                                    MinVa= 2 ;
                                }
                                else  if(value.min>1){
                                    MinVa= 1 ;
                                }
                                else  if(value.min>0.9){
                                    MinVa= 0.9 ;
                                }
                                else  if(value.min>0.8){
                                    MinVa= 0.8 ;
                                }
                                else  if(value.min>0.7){
                                    MinVa= 0.7;
                                }
                                else  if(value.min>0.6){
                                    MinVa= 0.6 ;
                                }
                                else  if(value.min>0.5){
                                    MinVa= 0.5 ;
                                }
                                else  if(value.min>0.4){
                                    MinVa= 0.4 ;
                                }
                                else  if(value.min>0.3){
                                    MinVa= 0.3 ;
                                }
                                else  if(value.min>0.2){
                                    MinVa= 0.2 ;
                                }
                                else  if(value.min>0.1){
                                    MinVa= 0.1 ;
                                }
                                else  if(value.min>0.09){
                                    MinVa= 0.09 ;
                                }
                                else  if(value.min>0.08){
                                    MinVa= 0.08 ;
                                }
                                else  if(value.min>0.07){
                                    MinVa= 0.07 ;
                                }
                                else  if(value.min>0.06){
                                    MinVa= 0.06 ;
                                }
                                else  if(value.min>0.05){
                                    MinVa= 0.05 ;
                                }
                                else  if(value.min>0.04){
                                    MinVa= 0.04 ;
                                }
                                else  if(value.min>0.03){
                                    MinVa= 0.03 ;
                                }
                                else  if(value.min>0.02){
                                    MinVa= 0.02 ;
                                }
                                else  if(value.min>0.01){
                                    MinVa= 0.01 ;
                                }
                                else if(value.min>0){
                                    MinVa=0 ;
                                }
                                else if(value.min>-0.01){
                                    MinVa= -0.01 ;
                                }
                                else if(value.min>-0.02){
                                    MinVa= -0.02 ;
                                }
                                else if(value.min>-0.03){
                                    MinVa= -0.03 ;
                                }
                                else if(value.min>-0.04){
                                    MinVa= -0.04 ;
                                }
                                else if(value.min>-0.05){
                                    MinVa= -0.05 ;
                                }
                                else if(value.min>-0.06){
                                    MinVa= -0.06 ;
                                }
                                else if(value.min>-0.07){
                                    MinVa= -0.07 ;
                                }
                                else if(value.min>-0.08){
                                    MinVa= -0.08 ;
                                }
                                else if(value.min>-0.09){
                                    MinVa= -0.09 ;
                                }
                                else if(value.min>-0.1){
                                    MinVa= -0.1 ;
                                }
                                else if(value.min>-0.2){
                                    MinVa= -0.2 ;
                                }
                                else if(value.min>-0.3){
                                    MinVa= -0.3 ;
                                }
                                else if(value.min>-0.4){
                                    MinVa= -0.4 ;
                                }
                                else if(value.min>-0.5){
                                    MinVa= -0.5 ;
                                }else if(value.min>-0.6){
                                    MinVa= -0.6 ;
                                }
                                else if(value.min>-0.7){
                                    MinVa= -0.7 ;
                                }
                                else if(value.min>-0.8){
                                    MinVa= -0.8 ;
                                }
                                else if(value.min>-0.9){
                                    MinVa= -0.9 ;
                                }
                                else if(value.min>-1){
                                    MinVa= -1 ;
                                }
                                else if(value.min>-2){
                                    MinVa= -2 ;
                                }
                                else if(value.min>-3){
                                    MinVa= -3 ;
                                }
                                else if(value.min>-4){
                                    MinVa= -4 ;
                                }
                                else if(value.min>-5){
                                    MinVa= -5 ;
                                }
                                else if(value.min>-10){
                                    var test1 =Math.floor( value.min);
                                    MinVa= test1 ;
                                }
                                else if(value.min>-100){
                                    var test1 =Math.floor( value.min/10);
                                    MinVa= test1*10 ;
                                }
                                else if(value.min>-1000){
                                    var test1 =Math.floor( value.min/100);
                                    MinVa= test1*100 ;
                                }
                                else if(value.min>-10000){
                                    var test1 =Math.floor( value.min/1000);
                                    MinVa= test1*1000 ;
                                }
                                else if(value.min>-100000){
                                    var test1 =Math.floor( value.min/10000);
                                    MinVa= test1*10000 ;
                                }
                                else{
                                    MinVa=value.min ;
                                }
                                return MinVa;
                            },
                            max: function(value) {
                                var MaxVa;
                                if(value.max>100000){
                                    var test1 =Math.ceil( value.max/10000);
                                    MaxVa= test1*10000 ;
                                }
                                else if(value.max>10000){
                                    var test1 =Math.ceil( value.max/1000);
                                    MaxVa= test1*1000 ;
                                }
                                else if(value.max>1000){
                                    var test1 =Math.ceil( value.max/100);
                                    MaxVa= test1*100 ;
                                }
                                else  if(value.max>100){
                                    var test1 =Math.ceil( value.max/10);
                                    MaxVa= test1*10 ;
                                }
                                else if(value.max>10){
                                    var test1 =Math.ceil( value.max/10);
                                    MaxVa= test1*10 ;
                                }else if(value.max>5){
                                    MaxVa= 10 ;
                                }
                                else if(value.max>4){
                                    MaxVa= 5 ;
                                }
                                else if(value.max>3){
                                    MaxVa= 4 ;
                                }
                                else if(value.max>2){
                                    MaxVa= 3 ;
                                }
                                else  if(value.max>1){
                                    MaxVa= 2 ;
                                }
                                else if(value.max>0.9){
                                    MaxVa= 1 ;
                                }
                                else if(value.max>0.8){
                                    MaxVa= 0.9 ;
                                }
                                else if(value.max>0.7){
                                    MaxVa= 0.8 ;
                                }
                                else if(value.max>0.6){
                                    MaxVa= 0.7 ;
                                }
                                else if(value.max>0.5){
                                    MaxVa= 0.6 ;
                                }
                                else if(value.max>0.4){
                                    MaxVa= 0.5 ;
                                }
                                else if(value.max>0.3){
                                    MaxVa= 0.4 ;
                                }
                                else if(value.max>0.2){
                                    MaxVa= 0.3 ;
                                }
                                else if(value.max>0.1){
                                    MaxVa= 0.2 ;
                                }
                                else if(value.max>0.09){
                                    MaxVa= 0.1 ;
                                }
                                else if(value.max>0.08){
                                    MaxVa= 0.09 ;
                                }
                                else if(value.max>0.07){
                                    MaxVa= 0.08 ;
                                }
                                else if(value.max>0.06){
                                    MaxVa= 0.07 ;
                                }
                                else if(value.max>0.05){
                                    MaxVa= 0.06 ;
                                }
                                else if(value.max>0.04){
                                    MaxVa= 0.05 ;
                                }
                                else if(value.max>0.03){
                                    MaxVa= 0.04 ;
                                }
                                else if(value.max>0.02){
                                    MaxVa= 0.03 ;
                                }
                                else if(value.max>0.01){
                                    MaxVa= 0.02 ;
                                }
                                else if(value.max>0){
                                    MaxVa=0.01 ;
                                }else if(value.max>-0.01){
                                    MaxVa= 0 ;
                                }
                                else if(value.max>-0.02){
                                    MaxVa= -0.01 ;
                                }
                                else if(value.max>-0.03){
                                    MaxVa= -0.02 ;
                                }
                                else if(value.max>-0.04){
                                    MaxVa= -0.03 ;
                                }
                                else if(value.max>-0.05){
                                    MaxVa= -0.04 ;
                                }
                                else if(value.max>-0.06){
                                    MaxVa= -0.05 ;
                                }
                                else if(value.max>-0.07){
                                    MaxVa= -0.06 ;
                                }
                                else if(value.max>-0.08){
                                    MaxVa= -0.07 ;
                                }
                                else if(value.max>-0.09){
                                    MaxVa= -0.08 ;
                                }
                                else if(value.max>-0.1){
                                    MaxVa= -0.09 ;
                                }
                                else if(value.max>-0.2){
                                    MaxVa= -0.1 ;
                                }
                                else if(value.max>-0.3){
                                    MaxVa= -0.2 ;
                                }
                                else if(value.max>-0.4){
                                    MaxVa= -0.3 ;
                                }
                                else if(value.max>-0.5){
                                    MaxVa= -0.4 ;
                                }
                                else if(value.max>-0.6){
                                    MaxVa= -0.5 ;
                                }
                                else if(value.max>-0.7){
                                    MaxVa= -0.6 ;
                                }
                                else if(value.max>-0.8){
                                    MaxVa= -0.7 ;
                                }
                                else if(value.max>-0.9){
                                    MaxVa= -0.8 ;
                                }
                                else if(value.max>-1){
                                    MaxVa= -0.9 ;
                                }
                                else if(value.max>-2){
                                    MaxVa= -1 ;
                                }
                                else if(value.max>-3){
                                    MaxVa= -2 ;
                                }
                                else if(value.max>-4){
                                    MaxVa= -3 ;
                                }
                                else if(value.max>-5){
                                    MaxVa= -4 ;
                                }
                                else if(value.max>-10){
                                    var test1 =Math.floor( value.max);
                                    MaxVa= test1 ;
                                }
                                else if(value.max>-100){
                                    var test1 =Math.floor( value.max/10);
                                    MaxVa= test1*10 ;
                              }
                                else if(value.max>-1000){
                                    var test1 =Math.floor( value.max/100);
                                    MaxVa= test1*100 ;
                                }
                                else if(value.max>-10000){
                                    var test1 =Math.floor( value.max/1000);
                                    MaxVa= test1*1000 ;
                                }
                                else if(value.max>-100000){
                                    var test1 =Math.floor( value.max/10000);
                                    MaxVa= test1*10000 ;
                                }
                                else{
                                    MaxVa=value.max ;
                                }

                                return MaxVa;
                            },
                            splitNumber:2,
                            splitLine:{
                                show: true,
                                lineStyle: {
                                    type: 'solid',
                                    color: '#d4d4d4',//左边线的颜色
                                    opacity:0.2,
                                    width:'1'//坐标线的宽度
                                }},//去除网格线

                            axisLine:{
                                show:false
                            }
                        },
                        dataZoom: [
                            //给x轴设置滚动条
                            //下面这个属性是里面拖到
                            {
                                type: 'inside',
                                show: true,
                                zoomLock:true,
                                xAxisIndex: [0],
                                start: startPercent,//默认为1
                                end: endPercent
                            }
                        ],
                        series: [{
                            data: yData,
                            type: 'line',
                            smooth:true,  //曲线变平滑
                            symbol:'circle',
                            //symbolSize:10,
                            lineStyle:{
                                color: '#79C5FC'
                            },
                            itemStyle:{
                                color:'#79C5FC'
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#79C5FC' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: 'White' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            },
                        }]
                    };
                    myChart.setOption(option);
                }
            });

        }
        loadData(firstUrl,'tab1');
        $("#tab").click(function(e){

            var tabId =  e.target.id;
            if(tabId == "tab1"){
                clickUrl = apiUrl + "?id=gettheprovince_daydata&CITY_NAME="+city+"&S_id="+indId+"";
            }else if(tabId == "tab2"){
                clickUrl = apiUrl + "?id=gettheprovince_mothdata&CITY_NAME="+city+"&S_id="+indId+"";
            }else{
                clickUrl = apiUrl + "?id=gettheprovince_yeardata&CITY_NAME="+city+"&S_id="+indId+"";
            }
            var divs =  $("#tab").children('div');
            for(var i = 0; i< divs.length; i++ ){
                divs[i].style.height='30px';

                if(tabId === divs[i].id){
                    divs[i].style.height='30px';
                    divs[i].style.lineHeight='30px';
                    divs[i].style.borderRadius= '3em 3em 3em 3em / 3em 3em';



                    divs[i].style.backgroundColor='#169BFA';
                    divs[i].style.color='#ffffff';
                    loadData(clickUrl,tabId);
                }else{
                    divs[i].removeAttribute('style');
                    divs[i].style.height='30px';
                    divs[i].style.lineHeight='30px';
                }
            }
            //$("#table1").bootstrapTable('destroy');

        });

    };
</script>
</html>
